<template>
  <section class="study-wrapper">
    <home-title :data="studyData"></home-title>
    <article class="item-wrapper">
      <div class="stage">
        <h3>
          <span>热门</span>
          <nuxt-link to="/">查看更多</nuxt-link>
        </h3>
        <ul class="item">
          <li v-for="i in styleLink" :key="i.id" class="list">
            <h4>{{ i.title }}</h4>
            <div class="intro">
              <img height="36" width="36" :src="i.src" alt="">
              <strong>{{ i.intro }}</strong>
            </div>
          </li>
        </ul>
      </div>
      <div class="carousel">
        <el-carousel trigger="click" height="640px">
          <el-carousel-item v-for="i in carouselList" :key="i.to">
            <div class="img-wrapper">
              <img :src="`home/${i.src}`" alt="">
              <div class="keywords">{{ i.keywords }}</div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </article>
  </section>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  data() {
    return {
      carouselList: [
        {
          src: 'cainiao.png',
          to: 'https://www.runoob.com/',
          keywords: '入门'
        },
        {
          src: 'mdn.png',
          to: 'https://developer.mozilla.org/zh-CN/',
          keywords: '中级'
        },
        {
          src: 'wx.png',
          to:
            'https://developers.weixin.qq.com/miniprogram/dev/extended/weui/half-screen-dialog.html',
          keywords: '扩展'
        }
      ],
      studyData: {
        title: '学习驿站',
        src: 'xuexi.png'
      },
      styleLink: [
        {
          title: '学习 HTML',
          to: 'www.runoob.com/html/html-tutorial.html',
          intro: 'HTML，即超文本标记语言（Hyper Text Markup Language）',
          src:
            ''
        },
        {
          title: '学习 HTML5',
          to: 'www.runoob.com/html/html5-intro.html',
          intro: 'HTML5 是下一代 HTML 标准',
          src:
            ''
        },
        {
          title: '学习 CSS',
          to: 'www.runoob.com/html/html5-intro.html',
          intro: 'HTML5 是下一代 HTML 标准',
          src:
            ''
        },
        {
          title: '学习 HTML',
          to: 'www.runoob.com/html/html-tutorial.html',
          intro: 'HTML，即超文本标记语言（Hyper Text Markup Language）',
          src:
            ''
        },
        {
          title: '学习 HTML5',
          to: 'www.runoob.com/html/html5-intro.html',
          intro: 'HTML5 是下一代 HTML 标准',
          src:
            ''
        },
        {
          title: '学习 CSS',
          to: 'www.runoob.com/html/html5-intro.html',
          intro: 'HTML5 是下一代 HTML 标准',
          src:
            ''
        },
        {
          title: '学习 HTML',
          to: 'www.runoob.com/html/html-tutorial.html',
          intro: 'HTML，即超文本标记语言（Hyper Text Markup Language）',
          src:
            ''
        },
        {
          title: '学习 HTML5',
          to: 'www.runoob.com/html/html5-intro.html',
          intro: 'HTML5 是下一代 HTML 标准',
          src:
            ''
        },
        {
          title: '学习 CSS',
          to: 'www.runoob.com/html/html5-intro.html',
          intro: 'HTML5 是下一代 HTML 标准',
          src:
            ''
        },
        {
          title: '学习 HTML',
          to: 'www.runoob.com/html/html-tutorial.html',
          intro: 'HTML，即超文本标记语言（Hyper Text Markup Language）',
          src:
            ''
        },
        {
          title: '学习 HTML5',
          to: 'www.runoob.com/html/html5-intro.html',
          intro: 'HTML5 是下一代 HTML 标准',
          src:
            ''
        },
        {
          title: '学习 CSS',
          to: 'www.runoob.com/html/html5-intro.html',
          intro: 'HTML5 是下一代 HTML 标准',
          src:
            ''
        },
        {
          title: '学习 HTML',
          to: 'www.runoob.com/html/html-tutorial.html',
          intro: 'HTML，即超文本标记语言（Hyper Text Markup Language）',
          src:
            ''
        },
        {
          title: '学习 HTML5',
          to: 'www.runoob.com/html/html5-intro.html',
          intro: 'HTML5 是下一代 HTML 标准',
          src:
            ''
        },
        {
          title: '学习 CSS',
          to: 'www.runoob.com/html/html5-intro.html',
          intro: 'HTML5 是下一代 HTML 标准',
          src:
            ''
        },
        {
          title: '学习 HTML',
          to: 'www.runoob.com/html/html-tutorial.html',
          intro: 'HTML，即超文本标记语言（Hyper Text Markup Language）',
          src:
            ''
        },
        {
          title: '学习 HTML5',
          to: 'www.runoob.com/html/html5-intro.html',
          intro: 'HTML5 是下一代 HTML 标准',
          src:
            ''
        },
        {
          title: '学习 CSS',
          to: 'www.runoob.com/html/html5-intro.html',
          intro: 'HTML5 是下一代 HTML 标准',
          src:
            ''
        },
        {
          title: '学习 HTML',
          to: 'www.runoob.com/html/html-tutorial.html',
          intro: 'HTML，即超文本标记语言（Hyper Text Markup Language）',
          src:
            ''
        },
        {
          title: '学习 HTML5',
          to: 'www.runoob.com/html/html5-intro.html',
          intro: 'HTML5 是下一代 HTML 标准',
          src:
            ''
        },
        {
          title: '学习 CSS',
          to: 'www.runoob.com/html/html5-intro.html',
          intro: 'HTML5 是下一代 HTML 标准',
          src:
            ''
        },
        {
          title: '学习 HTML',
          to: 'www.runoob.com/html/html-tutorial.html',
          intro: 'HTML，即超文本标记语言（Hyper Text Markup Language）',
          src:
            ''
        },
        {
          title: '学习 HTML5',
          to: 'www.runoob.com/html/html5-intro.html',
          intro: 'HTML5 是下一代 HTML 标准',
          src:
            ''
        },
        {
          title: '学习 CSS',
          to: 'www.runoob.com/html/html5-intro.html',
          intro: 'HTML5 是下一代 HTML 标准',
          src:
            ''
        }
      ]
    }
  }
})
</script>

<style scoped lang="scss">
.study-wrapper {
  width: 100%;
  padding: 20px 40px;
  background-color: #fff;
  .item-wrapper {
    width: 100%;
    display: flex;
    .stage {
      flex: 0 0 80%;
      padding: 0 20px;
      h3 {
        height: 40px;
        line-height: 40px;
        display: flex;
        justify-content: space-between;
      }
      .item {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        .list {
          flex: 0 0 25%;
          padding: 10px;
          h4 {
            height: 40px;
            line-height: 40px;
          }
          .intro {
            width: 100%;
            display: flex;
            strong {
              font-size: 14px;
              margin-left: 10px;
            }
          }
        }
      }
    }
    .carousel {
      flex: 1;
      .img-wrapper {
        position: relative;
        .keywords {
          position: absolute;
          right: 0;
          top: 0;
          z-index: 999;
          background-color: #eb2001;
          padding: 5px 10px;
          color: #fff;
        }
      }
    }
  }
}
</style>

